<template>
    <div ref="photo" id="photo">
        <el-popover placement="bottom-start" :width="530" trigger="hover">
            <template #reference>
                <div class="img"></div>
            </template>
            <div class="btn">
                <el-button type="primary" size="mini" @click="toPersonal"
                    >个人主页
                </el-button>
                <el-button type="primary" size="mini" @click="toFollow"
                    >我的关注
                </el-button>
                <el-button type="primary" size="mini" @click="toMessage"
                    >我的消息
                </el-button>
                <el-button type="primary" size="mini" @click="updateUserinfo"
                    >修改资料
                </el-button>
                <el-button type="primary" size="mini" @click="articleadmin"
                    >文章管理
                </el-button>
                <el-button type="danger" size="mini" @click="loginOut"
                    >退出登录
                </el-button>
            </div>
        </el-popover>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
    name: "Photo",
    computed: {
        ...mapState(["userInfo"]),
    },
    watch: {
        userInfo: {
            handler(val) {
                this.$nextTick(() => {
                    if (val.headsculptureUrl)
                        this.$refs.photo.querySelector(
                            ".img"
                        ).style.backgroundImage = `url("${val.headsculptureUrl}")`;
                });
            },
            deep: true,
        },
    },
    mounted() {
        this.$nextTick(() => {
            if (this.userInfo.headsculptureUrl)
                this.$refs.photo.querySelector(
                    ".img"
                ).style.backgroundImage = `url("${this.userInfo.headsculptureUrl}")`;
        });
    },
    methods: {
        ...mapMutations(["updateUser"]),
        loginOut() {
            console.log("我执行了");
            this.$axios({
                method: "get",
                url: "http://localhost:8081/ts/user/logout",
                headers: { token: localStorage.getItem("token") || "" },
            }).then((res) => {
                console.log(res);
                this.$message.success(res.data.respData);
            });
            this.updateUser({});
            this.$router.replace("/");
        },
        updateUserinfo() {
            this.$router.push("/user");
        },
        toPersonal() {
            this.$router.push(`/personal/${this.$store.state.userInfo.serial}`);
        },
        toFollow() {
            this.$router.push(`/follow`);
        },
        toMessage() {
            this.$router.push(`/mymessage`);
        },
        articleadmin() {
            this.$router.push(`/articleAdmin`);
        },
    },
};
</script>

<style lang="less" scoped>
#photo {
    margin-right: 15px;
}
.img {
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: center top;
    border-radius: 50%;
    margin-top: 5px;
    cursor: pointer;
    background-image: url(../assets/img/personal/ttxbb.jpg);
}
</style>
